<template>
    <div class="base-info">
        <el-form ref="basicscList" label-width="170px" label-position="left" class="demo-basicscList clear" v-if="Object.keys(basicscList).length != 0">
            <el-form-item label="账号" >
                <el-input v-model="basicscList.user_number" disabled></el-input>
            </el-form-item>
            <el-form-item label="用户名" >
                <el-input v-model="basicscList.user_name" disabled></el-input>
            </el-form-item>
            <el-form-item label="学校" >
                <el-input v-model="basicscList.school_name" disabled></el-input>
            </el-form-item>
            <el-form-item label="班级" >
                <el-input v-model="basicscList.class.rename" disabled></el-input>
            </el-form-item>
            <el-form-item label="班主任" >
                <el-input v-model="basicscList.class.teacher_name" disabled></el-input>
            </el-form-item>

            <template v-for="(item,key) in basicscList.studystatus">
                <!-- type==1 input框 -->
                <template v-if="item.is_up !== 1 && item.type === 1">
                    <el-form-item v-if="item.id === 11" :label="item.field_name" :key="key">
                        <el-input v-model="item.content.content" :placeholder="'请输入'+item.field_name" @change.native="initValue(item)" maxlength="11" :disabled="!editable"></el-input>
                    </el-form-item>
                    <el-form-item v-else-if="item.id === 12" :label="item.field_name" :key="key" >
                        <el-input v-model="item.content.content" :placeholder="'请输入'+item.field_name" @change.native="initValue(item)" maxlength="18" :disabled="!editable"></el-input>
                    </el-form-item>
                    <el-form-item v-else :label="item.field_name" :key="key" >
                        <el-input v-model="item.content.content" :placeholder="'请输入'+item.field_name" @change.native="initValue(item)" :disabled="!editable"></el-input>
                    </el-form-item>
                </template>
               
                <!-- type==3 radio(如：男、女) -->
                <el-form-item v-if="item.is_up !== 1 && item.type === 3" :label="item.field_name" :key="key" >
                    <el-radio-group v-model="item.content.content" :disabled="!editable">
                        <el-radio v-for="(item2, key2) in item.field_option" :label="key2+1" :key="key2">{{item2}}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- type==4 时间型 -->
                <el-form-item v-if="item.is_up !== 1 && item.type === 4" :label="item.field_name" :key="key" >
                    <el-date-picker
                        v-model="item.content.content"
                        type="date"
                        :disabled="!editable"
                        placeholder="选择日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <!-- type==5 下拉窗 -->
                <el-form-item v-if="item.is_up !== 1 && item.type === 5" :label="item.field_name" :key="key" >
                    <el-select v-model="item.content.content" :placeholder="'请选择' + item.field_name" :disabled="!editable">
                        <el-option
                            v-for="(item3, key3) in item.field_option"
                            :key="key3"
                            :label="item3"
                            :value="key3 + 1">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- type==6 textarea -->
                <el-form-item v-if="item.is_up !== 1 && item.type === 6" :label="item.field_name" :key="key" >
                    <el-input type="textarea" v-model="item.content.content" @change.native="initValue(item)" :placeholder="'请选择' + item.field_name" maxlength="50" show-word-limit :disabled="!editable"></el-input>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>

<script>
    export default{
        props:['editable'],
        data(){
            return {
                basicscList: {},     // 基础信息
                BasicscList: {},     // 默认基础信息
            }
        },
        created() {
            // 获取表单信息
            this.getList();
        },
        methods: {
            /**
             * 获取信息
             * @param {Number} key 1基础信息 || 2家庭信息 || 3来源信息 || 4其他信息
             */
            getList() {
                let success = (res => {
                    this.basicscList = deep_clone(res.data);
                    window.da = this.basicscList
                    this.BasicscList = deep_clone(res.data);
                    // console.log(this.basicscList)

                    if (!is_empty(res.data.studystatus)) {
                        res.data.studystatus.forEach(item => {
                            if (item.id === 18) {
                                if (item.content.content != null) {
                                    var photo = deep_clone(item.content.content);
                                    this.$emit('getPhoto',photo)
                                }
                            }
                            if (item.id === 16) {
                                var status = item.content.content;
                                this.$emit('getStatus', status, res.data.class.id)
                            }
                            if(item.id === 2){
                                if (item.content.content != null) {
                                    var pinyin = deep_clone(item.content.content);
                                    this.$emit('getPinyin',pinyin)
                                }
                            }
                            if(item.id === 1){
                                if (item.content.content != null) {
                                    var name = deep_clone(item.content.content);
                                    this.$emit('getName',name)
                                }
                            }
                        })
                    }
                
                });
                let params = {
                    user_id: this.$g.user_id,
                    from_type: 1,
                }
                
                this.$ajax.get('api/studystatus/studystatus_info', {params, func: {success: success}})
            },
            /**
             * 修改真实姓名
             * @param {String} str 真实姓名
             */
            changeRealName(newName) {
                // console.log('changeRealName')
                if (newName) {
                    this.basicscList.studystatus.forEach(item => {
                        if (item.id === 1) {
                            item.content.content = newName;
                        }
                    })
                }
            },
            // 初始化输入框的值
            initValue(a){
                if(a.content.content === ''){
                    a.content.content = null
                }
            },
            // 修改拼音
            changePinyin(newPinyin){
                // console.log('changePinyin')
                if (newPinyin) {
                    this.basicscList.studystatus.forEach(item => {
                        if (item.id === 2) {
                            item.content.content = newPinyin;
                        }
                    })
                }
            },
            // 修改头像
            changeTouxiang(newTouxiang){
                // console.log('changeTouxiang')
                if (newTouxiang) {
                    this.basicscList.studystatus.forEach(item => {
                        if (item.id === 18) {
                            item.content.content = newTouxiang;
                        }
                    })
                }
            },
            // 表单验证
            submitForm(formName) {
                // console.log('basicscList:',this.basicscList)
                // console.log('BasicscList:',this.BasicscList)

                // if (this.errorTitle.telTip !== '' || this.errorTitle.cardTip !== '') {
                //     return false;
                // }

                let param = {arr: []};
                param.arr['user_id'] = this.$g.user_id;
                param.arr['basic'] = [];

                this.basicscList.studystatus.forEach(item => {
                    let _arr = {
                        field_id: item.id,
                        content: item.content.content
                    }

                    param.arr['basic'].push(_arr);
                })

                const success = (res => {
                    let status;
                    if(res.status == 'success'){
                        status = true;

                        // 更新表单信息
                        this.getList();
                    }else{
                        status = false;
                    }

                    this.$emit('changeSaveStatus', status)
                })

                this.$ajax.post("api/studystatus/studystatus_operation", param, {func: {success: success}});
                
            },
            // 检测当前板块有没有修改
            contrast(){
                // console.log('basicscList:',JSON.stringify(this.basicscList) == JSON.stringify(this.BasicscList))
                // console.log('basicscList:',deep_clone(this.basicscList), deep_clone(this.BasicscList))
                return JSON.stringify(this.basicscList) == JSON.stringify(this.BasicscList)
            },
            // 取消编辑
            cancelEdit(){
                // console.log('cancelEdit:basicscList')
                this.basicscList = deep_clone(this.BasicscList);
            },
        }
    }
</script>
<style lang="scss">
    .base-info{
        .el-form{
            .el-form-item{
                width:500px;
                &:nth-child(odd){
                    float:left;
                }
                &:nth-child(even){
                    float:right;
                }
                .el-form-item__label{
                    padding:0;
                    font-size: 14px;
                    color: #333333;
                    letter-spacing: 0.08px;
                    &::before{
                        content:''
                    }
                }
                .el-form-item__content{
                    height: 40px;

                    // 日期编辑框
                    .el-date-editor{
                        width:100%;
                        cursor:opinter;
                    }
                    // 下拉选择框
                    .el-select{
                        width:100%;
                        .el-input{
                            .el-input__suffix{
                                .el-input__suffix-inner{
                                    .el-select__caret{
                                        color:#231815;
                                    }
                                }
                            }
                        }
                    }
                    // 单选框
                    .el-radio-group{
                        .el-radio{
                            .el-radio__input{
                                .el-radio__inner:hover{
                                    border-color: #3bb;
                                }
                            } 
                        }

                        // 被选中后的样式
                        .el-radio.is-checked{
                            .el-radio__input.is-checked{
                                .el-radio__inner{
                                    border-color: #3bb;
                                    background: #3bb;
                                    &:hover{
                                        border-color: #3bb;
                                    }
                                }
                            } 
                            .el-radio__label{
                                color:#606266;
                            }
                        }
                    }
                    // areatext输入框
                    .el-textarea{
                        .el-textarea__inner{
                            height:80px;
                            resize:none;
                        }
                        .el-input__count{
                            background: transparent;
                            bottom: -8px;
                            right: 8px;
                        }
                        // 在不可编辑时的样式
                        &.is-disabled{
                            .el-textarea__inner{
                                color: #333;
                                border-radius:0;
                                background-color: #EFEFEF;
                                border-color: #DDDDDD;
                            }
                        }
                    }
                    // input框不可编辑时的样式
                    .el-input.is-disabled{
                        .el-input__inner{
                            color: #333;
                            border-radius:0;
                            background-color: #EFEFEF;
                            border-color: #DDDDDD;
                        }
                    }
                }
            }
        }
    }
</style>